<template>
    <div class="toolbar">
        <el-row
            v-for="(shape, k) in toolbar"
            :key="k"
            justify="center"
            align="middle"
            class="item"
            @mousedown="mouseDown(shape)"
        >
            <Iconfont :name="shape.type" />
        </el-row>
        <el-row justify="center" class="color-picker">
            <el-color-picker v-model="color" show-alpha :predefine="colors" @active-change="change" />
        </el-row>
    </div>
</template>

<script>
    import { defineComponent, watch, ref } from 'vue'
    import { toolbarOpt, predefineColors } from './constant'
    import { useStore } from 'vuex'

    export default defineComponent({
        name: 'Toolbar',
        props: {
            curNode: null,
        },
        setup(props) {
            const toolbar = toolbarOpt
            const store = useStore()
            let lf = null
            const color = ref('rgba(255, 255, 255, 1)')
            const colors = predefineColors

            watch(
                () => store.state.logicFlow.lf,
                (nval) => {
                    lf = nval
                }
            )

            function mouseDown(shape) {
                if (shape.type != 'theme') mouseDownHandle(shape)
            }

            function mouseDownHandle(config) {
                lf.dnd.startDrag(config)
            }

            function change(val) {
                color.value = val
                if (props?.curNode) {
                    const modal = lf.getNodeModel(props.curNode.id)
                    console.log(modal)
                    modal.updateAttributes({ fill: color.value, color: '#ffffff' })
                }
            }

            return { toolbar, mouseDown, color, colors, change }
        },
    })
</script>

<style lang="less" scoped>
    @import url('@/common.less');
    .toolbar {
        position: fixed;
        background: white;
        box-shadow: @box-shadow;
        border: 1px solid @border-color;
        transform: translateY(50%);
        bottom: 50%;
        border-radius: 5px;
        .item,
        .color-picker {
            width: 50px;
            height: 50px;
        }
        .item :hover {
            width: 35px;
            height: 35px;
            // background: @border-color;
        }
    }
</style>
